<h2>
		1 综合图表	</h2>
	<div class="codeView bs-docs-example ">
				<div id="container" style="width:100%;height:auto;margin:0 auto">
			</div>

<script type="text/javascript">
	$(function () {
    $('#container').highcharts({
        chart: {
        },
        title: {
            text: '折线，饼状，条状综合图'
        },
		//x轴
        xAxis: {
            categories: ['APP', 'P2P', 'ERP', 'WM', 'Tiny']
        },
        tooltip: {
            formatter: function() {
                var s;
                if (this.point.name) { // the pie chart
                    s = ''+
                        this.point.name +': '+ this.y +' fruits';
                } else {
                    s = ''+
                        this.x  +': '+ this.y;
                }
                return s;
            }
        },
        labels: {
            items: [{
                html: '产品消费总量',
                style: {
                    left: '40px',
                    top: '8px',
                    color: 'block'
                }
            }]
        },
        series: [{
            type: 'column',
            name: 'Jane',
            data: [3, 2, 1, 3, 4]
        }, {
            type: 'column',
            name: 'John',
            data: [2, 3, 5, 7, 6]
        }, {
            type: 'column',
            name: 'Joe',
            data: [4, 3, 3, 9, 0]
        }, {
            type: 'spline',
            name: 'Average',
            data: [3, 2.67, 3, 6.33, 3.33],
            marker: {
            	lineWidth: 2,
            	lineColor: Highcharts.getOptions().colors[3],
            	fillColor: 'white'
            }
        }, {
            type: 'pie',
            name: 'Total consumption',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }, {
                name: 'Joe',
                y: 19,
                color: Highcharts.getOptions().colors[2] // Joe's color
            }],
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});
</script>	</div>


		<h2>
		2 折线图	</h2>
	<div class="codeView bs-docs-example ">
				<div id="lineContainer" style="min-width:700px;height:400px">
			</div>

<script type="text/javascript">
$(function () {
    $('#lineContainer').highcharts({
        title: {
            text: '月平均温度',
            x: -20 //center
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});
</script>	</div>


		<h2>
		3 区域图	</h2>
	<div class="codeView bs-docs-example ">
				<div id="areaareaContainer" style="min-width:700px;height:400px">
			</div>

<script type="text/javascript"> 
$(function () {
    $('#areaareaContainer').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: '美国与俄罗斯核储备'
        },
        //subtitle: {
         //   text: '副标题'
       // },
        xAxis: {
            labels: {
                formatter: function() {
                    return this.value; //清洁无格式的数字
                }
            }
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function() {
                    return this.value / 1000 +'k';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: '美国',
            data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,1005, 1436,
            		2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,27387, 29459, 31056, 31982,
            		32040, 31233, 29224, 27342, 26662,26956, 27912, 28999, 28965, 27826, 25579,
            		25722, 24826, 24605,24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344,
            		23586,22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 
            ]
        }, {
            name: '俄罗斯',
            data: [null, null, null, null, null, null, null , null , null ,null,5, 25, 50,
            	120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,4238, 5221, 6129,
            	7089, 8339, 9399, 10538, 11643, 13092, 14478,15915, 17385, 19055, 21205,
            	23044, 25393, 27935, 30062, 32049,33952, 35804, 37431, 39197, 45000, 43000,
            	41000, 39000, 37000,35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000,
            	22000,21000, 20000, 19000, 18000, 18000, 17000, 16000
            ]
        }]
    });
});   				
</script>	</div>


		<h2>
		4 3D柱状图	</h2>
	<div class="codeView bs-docs-example ">
				<div id="3dbarContainer" style="min-width:700px;height:400px">
			</div>
	<div id="3dSliders" style="min-width:310px;max-width: 800px;margin: 0 auto;">
			<table >
	<tr>
		<td width="80px">α角</td>
		<td><input id="Adjust0" type="range" min="0" max="45" value="15"/> <span id="Adjust0-value" class="value"></span></td>
	</tr>
	<tr>
		<td>β角</td>
		<td><input id="Adjust1" type="range" min="0" max="45" value="15"/> <span id="Adjust1-value" class="value"></span></td>
	</tr>
</table>
	</div>

<script type="text/javascript">
﻿$(function () {
    // 设置图表
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: '3dbarContainer',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 10,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: '3D图表旋转演示'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    

    // 激活滑块
    $('#Adjust0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#Adjust1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });

    function showValues() {
        $('#Adjust0-value').html(chart.options.chart.options3d.alpha);
        $('#Adjust1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();
});
</script>	</div>


		<h2>
		5 包含负值的柱状图	</h2>
	<div class="codeView bs-docs-example ">
				<div id="barContainer" style="min-width:700px;height:400px">
			</div>

<script type="text/javascript">
﻿$(function () {
    $('#barContainer').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '列图表与负值'
        },
        xAxis: {
            categories: ['苹果', '橘子', '梨', '桃', '香蕉']
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, -2, -3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, -2, 5]
        }]
    });
});
</script>	</div>


		<h2>
		6 双饼图	</h2>
	<div class="codeView bs-docs-example ">
				<div id="doublePieContainer" style="min-width:700px;height:400px">
			</div>

<script type="text/javascript">
$(function () {
    var colors = Highcharts.getOptions().colors,
        categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
        name = 'Browser brands',
        data = [{
                y: 55.11,
                color: colors[0],
                drilldown: {
                    name: 'MSIE versions',
                    categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
                    data: [10.85, 7.35, 33.06, 2.81],
                    color: colors[0]
                }
            }, {
                y: 21.63,
                color: colors[1],
                drilldown: {
                    name: 'Firefox versions',
                    categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
                    data: [0.20, 0.83, 1.58, 13.12, 5.43],
                    color: colors[1]
                }
            }, {
                y: 11.94,
                color: colors[2],
                drilldown: {
                    name: 'Chrome versions',
                    categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                        'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
                    data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
                    color: colors[2]
                }
            }, {
                y: 7.15,
                color: colors[3],
                drilldown: {
                    name: 'Safari versions',
                    categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                        'Safari 3.1', 'Safari 4.1'],
                    data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
                    color: colors[3]
                }
            }, {
                y: 2.14,
                color: colors[4],
                drilldown: {
                    name: 'Opera versions',
                    categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
                    data: [ 0.12, 0.37, 1.65],
                    color: colors[4]
                }
            }];


    // 构建数组的数据
    var browserData = [];
    var versionsData = [];
    for (var i = 0; i < data.length; i++) {

        // 添加浏览器数据
        browserData.push({
            name: categories[i],
            y: data[i].y,
            color: data[i].color
        });

        // 添加版本数据
        for (var j = 0; j < data[i].drilldown.data.length; j++) {
            var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
            versionsData.push({
                name: data[i].drilldown.categories[j],
                y: data[i].drilldown.data[j],
                color: Highcharts.Color(data[i].color).brighten(brightness).get()
            });
        }
    }

    // 创建图表
    $('#doublePieContainer').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: '浏览器的市场份额,2015年10月'
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
    	    valueSuffix: '%'
        },
        series: [{
            name: 'Browsers',
            data: browserData,
            size: '60%',
            dataLabels: {
                formatter: function() {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'white',
                distance: -30
            }
        }, {
            name: 'Versions',
            data: versionsData,
            size: '80%',
            innerSize: '60%',
            dataLabels: {
                formatter: function() {
                    // 只显示大于1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }
        }]
    });
});                                                                                                              				
</script>	</div>


		<h2>
		7 动态刷新	</h2>
	<div class="codeView bs-docs-example ">
				<div id="dynamicContainer" style="min-width:700px;height:400px">
			</div>

<script type="text/javascript">
$(function () {                                                                     
    $(document).ready(function() {                                                  
        Highcharts.setOptions({                                                     
            global: {                                                               
                useUTC: false                                                       
            }                                                                       
        });                                                                         
                                                                                    
        var chart;                                                                  
        $('#dynamicContainer').highcharts({                                                
            chart: {                                                                
                type: 'spline',                                                     
                animation: Highcharts.svg, // 不要在旧动画IE
                marginRight: 10,                                                    
                events: {                                                           
                    load: function() {                                              
                                                                                    
                        // 设置图表每秒钟的更新
                        var series = this.series[0];                                
                        setInterval(function() {                                    
                            var x = (new Date()).getTime(), // 当前时间
                                y = Math.random();                                  
                            series.addPoint([x, y], true, true);                    
                        }, 1000);                                                   
                    }                                                               
                }                                                                   
            },
            title: {                                                                
                text: '现场随机数据'
            },                                                                      
            xAxis: {                                                                
                type: 'datetime',                                                   
                tickPixelInterval: 150                                              
            },                                                                      
            yAxis: {                                                                
                title: {                                                            
                    text: 'Value'                                                   
                },                                                                  
                plotLines: [{                                                       
                    value: 0,                                                       
                    width: 1,                                                       
                    color: '#808080'                                                
                }]                                                                  
            },                                                                      
            tooltip: {                                                              
                formatter: function() {                                             
                        return '<b>'+ this.series.name +'</b><br/>'+                
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);                         
                }                                                                   
            },                                                                      
            legend: {                                                               
                enabled: false                                                      
            },                                                                      
            exporting: {                                                            
                enabled: false                                                      
            },                                                                      
            series: [{                                                              
                name: 'Random data',                                                
                data: (function() {                                                 
                    // 生成随机数据的数组
                    var data = [],                                                  
                        time = (new Date()).getTime(),                              
                        i;                                                          
                                                                                    
                    for (i = -19; i <= 0; i++) {                                    
                        data.push({                                                 
                            x: time + i * 1000,                                     
                            y: Math.random()                                        
                        });                                                         
                    }                                                               
                    return data;                                                    
                })()                                                                
            }]                                                                      
        });                                                                         
    });                                                                             
                                                                                    
});                                                                                 				                                                                        				
</script>	</div>


		<h2>
		8 绘制渲染流程图	</h2>
	<div class="codeView bs-docs-example ">
				<div id="renderingContainer" style="min-width:700px;height:400px">
			</div>

<script type="text/javascript">
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'renderingContainer',
            events: {
                load: function () {
                    
                    // 绘制流程图
                    var ren = this.renderer,
                        colors = Highcharts.getOptions().colors,
                        rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
                        leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];
                    
                    
                    
                    // 分隔符,客户端从服务
                    ren.path(['M', 120, 40, 'L', 120, 330])
                        .attr({
                            'stroke-width': 2,
                            stroke: 'silver',
                            dashstyle: 'dash'
                        })
                        .add();
                    
                    // 分离器,CLI从服务
                    ren.path(['M', 420, 40, 'L', 420, 330])
                        .attr({
                            'stroke-width': 2,
                            stroke: 'silver',
                            dashstyle: 'dash'
                        })
                        .add();
                    
                    // 头部
                    ren.label('网络客户端', 20, 40)
                        .css({
                            fontWeight: 'bold'
                        })
                        .add();
                    ren.label('Web服务/ CLI', 220, 40)
                        .css({
                            fontWeight: 'bold'
                        })
                        .add();
                    ren.label('命令行客户端', 440, 40)
                        .css({
                            fontWeight: 'bold'
                        })
                        .add();
        
                    // SaaS客户标签
                    ren.label('SaaS客户<br/>(浏览或<br/>脚本)', 10, 82)
                        .attr({
                            fill: colors[0],
                            stroke: 'white',
                            'stroke-width': 2,
                            padding: 5,
                            r: 5
                        })
                        .css({
                            color: 'white'
                        })
                        .add()
                        .shadow(true);
                    
                    // 箭头从SaaS端到幻JS
                    ren.path(rightArrow)
                         .attr({
                             'stroke-width': 2,
                             stroke: colors[3]
                         })
                        .translate(95, 95)
                        .add();
                             
                    ren.label('JSON后选项', 90, 75)
                        .css({
                            fontSize: '10px',
                            color: colors[3]
                        }) 
                        .add();
                    
                    ren.label('PhantomJS', 210, 82)
                        .attr({
                            r: 5,
                            width: 100,
                            fill: colors[1]
                        })
                        .css({
                            color: 'white',
                            fontWeight: 'bold'
                        })
                        .add();
                    
                    // JS渲染箭头
                    ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180])
                         .attr({
                             'stroke-width': 2,
                             stroke: colors[3]
                         })
                         .add();
                             
                    ren.label('SVG', 255, 120)
                        .css({
                            color: colors[3],
                            fontSize: '10px'
                        })                       
                        .add();
                    
                    ren.label('Batik', 210, 200)
                        .attr({
                            r: 5,
                            width: 100,
                            fill: colors[1]
                        })
                        .css({
                            color: 'white',
                            fontWeight: 'bold'
                        })
                        .add();
                    
                    // 宣染的SaaS客户箭头
                    ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130, 
                              'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135])
                         .attr({
                             'stroke-width': 2,
                             stroke: colors[3]
                         })
                         .add();
                             
                    ren.label('光栅化图像', 100, 110)
                        .css({
                            color: colors[3],
                            fontSize: '10px'
                        })                       
                        .add();
                    
                    // 浏览器标签
                    ren.label('浏览程序<br/>运行<br/>High图表', 10, 180)
                        .attr({
                            fill: colors[0],
                            stroke: 'white',
                            'stroke-width': 2,
                            padding: 5,
                            r: 5
                        })
                        .css({
                            color: 'white',
                            width: '100px'
                        })
                        .add()
                        .shadow(true);
                    
                    
                    
                    // 浏览器的渲染箭头
                    ren.path(rightArrow)
                         .attr({
                             'stroke-width': 2,
                             stroke: colors[1]
                         })
                        .translate(95, 205)
                         .add();
                             
                    ren.label('后SVG', 110, 185)
                        .css({
                            color: colors[1],
                            fontSize: '10px'
                        })
                        .add();
                    
                    // 宣染浏览器的箭头
                    ren.path(leftArrow)
                         .attr({
                             'stroke-width': 2,
                             stroke: colors[1]
                         })
                        .translate(95, 215)
                         .add();
                             
                    ren.label('光栅化图像', 100, 215)
                        .css({
                            color: colors[1],
                            fontSize: '10px'
                        })
                        .add();
                    
                    // 脚本标签
                    ren.label('Script', 450, 82)
                        .attr({
                            fill: colors[2],
                            stroke: 'white',
                            'stroke-width': 2,
                            padding: 5,
                            r: 5
                        })
                        .css({
                            color: 'white',
                            width: '100px'
                        })
                        .add()
                        .shadow(true);
                    
                    // 到phantomjs箭头
                    ren.path(leftArrow)
                         .attr({
                             'stroke-width': 2,
                             stroke: colors[2]
                         })
                        .translate(330, 90)
                         .add();
                             
                    ren.label('命令', 340, 70)
                        .css({
                            color: colors[2],
                            fontSize: '10px'
                        })
                        .add();
                    
                    // PhantomJS脚本箭头
                    ren.path(rightArrow)
                         .attr({
                             'stroke-width': 2,
                             stroke: colors[2]
                         })
                        .translate(330, 100)
                         .add();
                             
                    ren.label('光栅化图像', 330, 100)
                        .css({
                            color: colors[2],
                            fontSize: '10px'
                        })
                        .add();
                    
                    
                }
            }
        },
        title: {
            text: 'Highcharts导出服务器概述'
        }
            
    });
});
</script>	</div>


		<h2>
		9 柱状统计图表	</h2>
	<div class="codeView bs-docs-example ">
				<div id="barColumn" style="min-width:700px;height:400px">
			</div>

<script type="text/javascript">
	$(function () {
    var colors = Highcharts.getOptions().colors,
        categories = ['2015-10-28', '2015-10-29', '2015-10-30', '2015-10-31'],
        name = '每天解决BUG',
        data = [{
                y: 23,
                color: colors[3],
                drilldown: {
                    color: colors[3]
                }
            },{
                y: 8,
                color: colors[4],
                drilldown: {
                    color: colors[3]
                }
            }, {
                y: 12,
                color: colors[8],
                drilldown: {
                    color: colors[3]
                }
            }, 
            , {
                y: 15,
                color: colors[9],
                drilldown: {
                    color: colors[3]
                }
            }, ];

    var chart = $('#barColumn').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '每天解决BUG'
        },
        xAxis: {
            categories: categories
        },
        
        tooltip: {
            formatter: function() {
                var point = this.point,
                    s = this.x +'<br/>解决BUG<b>'+ this.y +'</b>个<br/>';
                	return s;
            }
        },
        series: [{
            name: name,
            data: data,
            color: 'white'
        }],
       
    })
    .highcharts(); // return chart
});
</script>	</div>



		<h2>
		表格数据柱状图	</h2>
	<div class="codeView bs-docs-example ">
		    <table id="datatable" class="table table-bordered ">
    <caption>表格数据柱状图</caption>
    <thead>
    <tr>
        <th></th>
        <th>解决BUG数</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>2015-10-12</th>
        <td>3</td>

    </tr>
    <tr>
        <th>2015-10-13</th>
        <td>2</td>

    </tr>
    <tr>
        <th>2015-10-14</th>
        <td>5</td>

    </tr>
    <tr>
        <th>2015-10-15</th>
        <td>1</td>

    </tr>
    <tr>
        <th>2015-10-16</th>
        <td>2</td>

    </tr>
    </tbody>
</table>

	<div id="cid969309663" style="min-width:700px;height:400px;"></div>
<script>
    $(function(){
        $("#cid969309663").highcharts({
            data: {
                table: $("#datatable").get(0)
            },
            chart: {
                type: 'column'
            },
            title: {
                text: $("#datatable").children("caption").html()
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: ''
                }
            },
            tooltip: {
                formatter: function() {

                    return '<b>'+ (this.key) +'</b><br/>'
                            + this.series.name +':'+this.y ;
                }
            }
        });
    });
</script>
	</div>

		<h3>
		组件包	</h3>
	<pre class="prettyprint linenums"><span class="Huialert-danger">以上组件依赖org.tinygroup.highCharts包</span></pre>
